<div class="docs-section">
    <h1 id="tree" class="page-header">树 TREE</h1>

    <h2 id="tree-base">基本说明</h2>
    <p>
        TREE控件主要用于以树形式展示数据。
    </p>
    <div class="docs-example">
        <div id="testTree"></div>
    </div>
    <div class="docs-code">
        <pre>
            <code class="html">&lt;div id="testTree"&gt;&lt;/div&gt;</code>
        </pre>
    </div>
    <div class="docs-code">
        <pre>
            <code class="js">//tree
var testTree = new Dolphin.TREE({
    panel : "#testTree",
    data : [
        {
            id : 1,
            name : '节点1',
            __type : 'folder',
            children : [
                {
                    id : 2,
                    name : '节点2',
                },
                {
                    id : 3,
                    name : '节点3',
                },
            ]
        }
    ],
});</code>
        </pre>
    </div>

    <h2 id="tree-parameters">树参数</h2>
    <table class="table table-bordered table-striped docs-param">
        <thead>
            <tr>
                <th>名称</th>
                <th style="width:120px;">类型</th>
                <th>默认</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody>
            <!--关键参数-->
            <tr>
                <td>panel</td><td>String | <br/>jQuery selector</td><td>无</td>
                <td>String遵循jQuery选择器规则，也可直接为jQuery selector。列表生成区域，可通过$(panel).data('dolphin')获取列表对象</td>
            </tr>
            <tr>
                <td>data</td><td>json</td><td>无</td>
                <td>json格式为[{id:'', name:'', __type:'folder/leaf'}]，配置data参数，直接根据data加载树节点</td>
            </tr>
            <tr>
                <td>url</td><td>String</td><td>无</td><td>请求后台数据时的url</td>
            </tr>
            <tr>
                <td>queryParams</td><td>json</td><td>无</td><td>请求后台数据时的参数</td>
            </tr>

            <!--数据相关参数-->
            <tr>
                <td>idField</td><td>String</td><td>id</td><td>数据主键字段</td>
            </tr>
            <tr>
                <td>nameField</td><td>String |<br/>Function</td><td>name</td><td>节点名称字段，为方法时，参数为行数据，返回名称结果</td>
            </tr>
            <tr>
                <td>requestKey</td><td>String</td><td>id</td><td>当树级联展开时，请求参数名称</td>
            </tr>
            <tr>
                <td>defaultId</td><td>String</td><td>-1</td><td>当树级联展开时，首次请求参数，之后为展开节点id</td>
            </tr>
            <!--<tr>-->
                <!--<td>sortName</td><td>String</td><td>无</td><td>数据排序字段，请求后台数据时作为查询条件sortName</td>-->
            <!--</tr>-->
            <!--<tr>-->
                <!--<td>sortOrder</td><td>String</td><td>无</td><td>数据排序方式，请求后台数据时作为查询条件sortOrder</td>-->
            <!--</tr>-->
            <!--<tr>-->
                <!--<td>sortFlag</td><td>Boolean</td><td>false</td><td>列表表头是否默认显示排序图标</td>-->
            <!--</tr>-->

            <!--样式相关参数-->
            <tr>
                <td>checkbox</td><td>Boolean</td><td>true</td><td>是否有选择框</td>
            </tr>
            <tr>
                <td>multiple</td><td>Boolean</td><td>true</td><td>是否多选</td>
            </tr>
            <tr>
                <td>cascadeCheck</td><td>Boolean</td><td>true</td><td>是否关联复选框：<br/>当选中父级时，自动选中子级；<br/>当所有子级选中时，自动选中父级</td>
            </tr>
            <tr>
                <td>onlyLeafCheck</td><td>Boolean</td><td>false</td><td>是否只有叶子节点可选中</td>
            </tr>
            <tr>
                <td>clickForCheck</td><td>Boolean</td><td>true</td><td>单击点击时是否切换选择状态</td>
            </tr>

            <!--<tr>-->
                <!--<td>title</td><td>String</td><td>null</td><td>当配置时，以面板方式显示列表标题</td>-->
            <!--</tr>-->
            <!--<tr>-->
                <!--<td>panelType</td><td>String</td><td>panel-primary</td>-->
                <!--<td>面板主题，可选：panel-primary | panel-success | panel-info | panel-warning | panel-danger</td>-->
            <!--</tr>-->
            <!--<tr>-->
                <!--<td>titleIcon</td><td>String</td><td>glyphicon-list</td><td>表头图标，使用Bootstrap Glyphicons 字体图标</td>-->
            <!--</tr>-->

            <tr>
                <td>icon</td><td>json</td><td>
                    <pre class="not-code">{
    folder_open : 'glyphicon glyphicon-folder-open',
    folder_close : 'glyphicon glyphicon-folder-close',
    file : 'glyphicon glyphicon-file'
}</pre></td><td>节点图标，使用Bootstrap Glyphicons 字体图标</td>
            </tr>
            <!--<tr>-->
                <!--<td>loadingFlag</td><td>Boolean</td><td>true</td><td>是否显示加载状态</td>-->
            <!--</tr>-->
        </tbody>
    </table>

    <h2 id="tree-node-parameters">节点信息</h2>
    <table class="table table-bordered table-striped docs-param">
        <thead>
            <tr>
                <th>名称</th>
                <th style="width:120px;">类型</th>
                <th>默认</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody>
            <!--关键参数-->
            <tr>
                <td>[idField]</td><td>String</td><td>无</td><td>必填，节点主键</td>
            </tr>
            <tr>
                <td>[nameField]</td><td>String</td><td>无</td><td>必填，节点显示名称</td>
            </tr>
            <tr>
                <td>__type</td><td>String</td><td>folder/leaf</td><td>是否叶子节点</td>
            </tr>
            <tr>
                <td>target</td><td>jQuery selector</td><td>无</td><td>[插件生成时自动添加]指向节点对应DOM元素</td>
            </tr>
            <tr>
                <td>parent</td><td>Object&lt;node&gt;</td><td>无</td><td>[插件生成时自动添加]上级节点</td>
            </tr>
            <tr>
                <td>children</td><td>Array&lt;node&gt;</td><td>无</td><td>子级节点；<br/>非级联展开时，由数据传入；<br/>级联展开时，由自动添加</td>
            </tr>
            <tr>
                <td>[other]</td><td>无</td><td>无</td><td>传入数据自带其它信息</td>
            </tr>
        </tbody>
    </table>

    <h2 id="tree-event">事件</h2>
    <table class="table table-bordered table-striped docs-param">
        <thead>
            <tr>
                <th>事件</th>
                <th style="width:100px;">参数</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>onLoad</td>
                <td>data</td>
                <td>
                    当树加载完成后触发，参数说明：<br/>
                    data：树数据
                </td>
            </tr>
            <tr>
                <td>onClick</td>
                <td>node</td>
                <td>
                    当点击节点的时候触发，参数说明：<br/>
                    node：节点数据
                </td>
            </tr>
            <tr>
                <td>onChecked</td>
                <td>node</td>
                <td>
                    当选中/取消选中节点时触发，参数说明：<br/>
                    node：节点数据
                </td>
            </tr>
            <tr>
                <td>formatterExpend</td>
                <td>node</td>
                <td>
                    级联展开节点时，自定义子级数据获取方法，参数说明：<br/>
                    node：节点数据
                </td>
            </tr>
        </tbody>
    </table>

    <h2 id="tree-function">方法</h2>
    <table class="table table-bordered table-striped docs-param">
        <thead>
            <tr>
                <th>方法</th>
                <th style="width:100px;">参数</th>
                <th>返回值</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>find</td>
                <td>queryStr</td>
                <td>Array&lt;node&gt;</td>
                <td>
                    根据id或name进行模糊查询，返回查询到的所有节点，参数说明：<br/>
                    queryStr：模糊查询条件(String)
                </td>
            </tr>
            <tr>
                <td>findById</td>
                <td>id</td>
                <td>Object&lt;node&gt;</td>
                <td>
                    根据id进行精确查询，返回查询到的节点，参数说明：<br/>
                    id：节点id(String)
                </td>
            </tr>
            <tr>
                <td>findByIds</td>
                <td>ids</td>
                <td>Array&lt;node&gt;</td>
                <td>
                    根据id进行精确查询，返回查询到的所有节点，参数说明：<br/>
                    ids：节点id(Array&lt;String&gt;)
                </td>
            </tr>
            <tr>
                <td>expend</td>
                <td>node</td>
                <td>无</td>
                <td>
                    展开指定节点，参数说明：<br/>
                    node：完整节点数据(Object&lt;node&gt;)，通过findById等方法获取
                </td>
            </tr>
            <tr>
                <td>expandTo</td>
                <td>node</td>
                <td>无</td>
                <td>
                    将指定节点的所有祖先节点展开，参数说明：<br/>
                    node：完整节点数据(Object&lt;node&gt;)，通过findById等方法获取
                </td>
            </tr>
            <tr>
                <td>expandAll</td>
                <td>无</td>
                <td>无</td>
                <td>
                    展开所有节点
                </td>
            </tr>
            <tr>
                <td>collapse</td>
                <td>node</td>
                <td>无</td>
                <td>
                    收起指定节点，参数说明：<br/>
                    node：完整节点数据(Object&lt;node&gt;)，通过findById等方法获取
                </td>
            </tr>
            <tr>
                <td>collapseAll</td>
                <td>node</td>
                <td>无</td>
                <td>
                    收起所有节点
                </td>
            </tr>
            <tr>
                <td>scrollTo</td>
                <td>node</td>
                <td>无</td>
                <td>
                    将TREE.panel的纵向滚动条移至节点，参数说明：<br/>
                    node：完整节点数据(Object&lt;node&gt;)，通过findById等方法获取
                </td>
            </tr>
            <tr>
                <td>hightLight</td>
                <td>node</td>
                <td>无</td>
                <td>
                    高亮显示节点，参数说明：<br/>
                    node：完整节点数据(Object&lt;node&gt;)，通过findById等方法获取
                </td>
            </tr>
            <tr>
                <td>cleanHightLight</td>
                <td>无</td>
                <td>无</td>
                <td>
                    清除所有高亮显示
                </td>
            </tr>
            <tr>
                <td>query</td>
                <td>queryStr</td>
                <td>无</td>
                <td>
                    根据id或name进行前台模糊查询，将查询到的节点高亮显示；<br/>
                    首次查询时，高亮显示第一个查询结果；<br/>
                    二次查询时，当queryStr与上次相同时，高亮显示上次结果的下一个查询结果
                    参数说明：<br/>
                    queryStr：模糊查询条件(String)
                </td>
            </tr>
            <tr>
                <td>check</td>
                <td>node<br/>changeFlag</td>
                <td>无</td>
                <td>
                    选中指定节点，参数说明：<br/>
                    node：完整节点数据(Object&lt;node&gt;)，通过findById等方法获取<br/>
                    changeFlag：是否触发checkbox change事件
                </td>
            </tr>
            <tr>
                <td>uncheck</td>
                <td>node<br/>changeFlag</td>
                <td>无</td>
                <td>
                    取消选中指定节点，参数说明：<br/>
                    node：完整节点数据(Object&lt;node&gt;)，通过findById等方法获取<br/>
                    changeFlag：是否触发checkbox change事件
                </td>
            </tr>
            <tr>
                <td>getChecked</td>
                <td>无</td>
                <td>Array&lt;node&gt;</td>
                <td>
                    获取所有选中节点
                </td>
            </tr>
        </tbody>
    </table>
</div>